<template>
  <basic-container>
    <SearchForm 
    :searchformConfig="searchformConfig" 

    @handleResetClick="handleResetClick"
      @handleQueryClick="handleQueryClick" 
      v-show="searchShow" />
    <div class="container">
      <div class="list" v-loading="loading">
        <div class="item" v-for="(item, index) in data" :key="index">
          <img src="https://imgcs.s98s2.com/common/1693362816747782.png" alt="">

          <p>客户条码：产品产品产品全品巫妖产品产品产品全品巫妖全品巫妖产品产品产品全品巫妖产品产品产品全品巫妖</p>

          <p>物料名称：产品产品产品全品巫妖产品产品产品全品巫妖全品巫妖产品产品产品全品巫妖产品产品产品全品巫妖</p>

          <div class="bottom">
            <div class="price">¥139.00</div>
            <div>
              <el-input-number v-model="item.num" :min="1" :max="10" @change="handleChange()" size="small"
                style="transform: translateY(2px);" />
            </div>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination align="right" background @size-change="sizeChange" @current-change="currentChange"
          :current-page="page.currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/anwise/customer/customer';
import { customerInfo } from '@/const/anwise/customer/customer';
import { mapGetters } from 'vuex';
import { getDictionary } from '@/api/system/dictbiz';
import { getToken } from '@/utils/auth';
import { exportBlob } from '@/api/common';
import { downloadXls } from '@/utils/util';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import func from '@/utils/func';

import SearchForm from '@/components/FormSearch/index.vue';
export default {
  components: {
    SearchForm

  },
  data() {
    return {
      searchShow: true,
      num: 0,
      tableName: 'customer_table',
      defaults: {},
      customerInfo: customerInfo,
      defaultControl: false,
      form: {},
      query: {},
      loading: true,
      data: [],
      selectionList: [],
      searchShow: true,
      searchMenuSpan: 6,
      dateFormat: 'YYYY-MM-DD',
      pickerOptions: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      search: {},
      direction: 'rtl',
      customerId: 0,
      customerName: '安伟客户表',
      title: '',
      editable: '',
      searchformConfig: {
        labelWidth: "80px",
        formItems: [
          {
            field: "facName",
            type: "input",
            label: "产品名称",
            placeholder: "请输入",
          },
            {
                field: "facAddr",
                type: "input",
                label: "客户条码",
                placeholder: "请输入",
            },
            {
                field: "facAddr1",
                type: "input",
                label: "产品备注",
                placeholder: "请输入",
            },
        ],
      }
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.customer_add, false),
        viewBtn: this.validData(this.permission.customer_view, false),
        delBtn: this.validData(this.permission.customer_delete, false),
        editBtn: this.validData(this.permission.customer_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  mounted() {
    this.onLoad(this.page)
  },
  // unmounted() {
  //     setStore({name: this.tableName, content: this.defaults });
  // },
  methods: {
    refresh(){
        this.page = {
            pageSize: 10,
            currentPage: 1,
        }
        this.query = {}
        this.onLoad(this.page)
    },
    handleQueryClick(value){
        this.query = {...this.query,...value}
        this.onLoad(this.page)
    },
    handleResetClick(){
        this.query= {}
        this.refresh()
    },
    handleChange(value) {
      console.log(value)
    },
    showMaterialAudit(row) {
      this.$refs.materialAudit.show(row.id);
    },
    save() {
      this.$refs.dialogEdit.$refs.form.submit()
    },
    success() {
      console.log(34444)
      this.$refs.CustomerDialogEdit.handleClose()
    },
    handleDatePickerChange(value) {
      console.log(this.search);
    },
    initDict() {
      getDictionary({ code: 'customer_type' }).then(res => {
        this.customerTypeList = res.data.data;
      });
    },
    handleAdd() {
      this.title = '创建客户'
      this.$refs.dialogForm.init()
    },
    handleExport() {
      // const account = func.toStr(this.search.account);
      // const realName = func.toStr(this.search.realName);
      NProgress.start();
      exportBlob(
        `/blade-anwise/customer/customer/export?${this.website.tokenHeader
        }=${getToken()}`, this.search
      ).then(res => {
        downloadXls(res.data, `客户数据${this.$dayjs().format('YYYYMMDDHHmmss')}.xlsx`);
        NProgress.done();
      });
    },
    sortChange(val) {
      console.log(val)
      this.sort = {
        prop: val.prop,
        order: val.order
      };
      let order = "";
      if (this.sort.prop && this.sort.order) {
        if (this.sort.order === "descending") {
          order = `${this.sort.prop} desc`
        } else {
          order = `${this.sort.prop} asc`
        }
      }
      this.query.orderBy = order;
      this.onLoad(this.page);
    },
    onLoadBefore(page, params) {
      let order = "";
      if (this.sort.prop && this.sort.order) {
        if (this.sort.order === "descending") {
          order = `${this.sort.prop} desc`
        } else {
          order = `${this.sort.prop} asc`
        }
      }
      params.order = order;
      return false;
    },
    // 主表模块
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    // rowStyle() {
    //   return {
    //     height: '20px !important',
    //   };
    // },
    handleView(row) {
      this.title = '客户详情'
      this.customerId = row.id
      this.editable = false
      this.$refs.dialogEdit.init(this.customerId, this.editable)
    },
    handleEdit(row) {
      this.title = '编辑客户'
      this.customerId = row.id
      this.editable = true
      this.$refs.dialogEdit.init(this.customerId, this.editable)


    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.search.createTimeRule = '';

      this.search.createTimeSearch = '';
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        console.log(this.data)
        this.loading = false;

      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 20px;
}

.el-input-number {
  width: 90px;
}

.container {
  width: 100%;
  height: 80vh;
 

  .list {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    .item {
      width: 300px;
      height: 350px;
      background: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      margin-left: 10px;
      margin-top: 10px;
      text-align: center;

      img {
        width: 150px;
        margin-top: 30px;
        height: 150px;
      }

      p {
        font-size: 12px;
        width: 240px;
        margin: 15px auto;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 超出几行省略 */
        overflow: hidden;

      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 240px;
        margin: 15px auto;

        .price {
          color: red;
          font-size: 18px;
          font-weight: 600;
        }
      }
    }
  }
}
</style>